<!DOCTYPE html>
<html>
<head>
  <!-- vuetify -->
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <title>MyPetstoreForMerchant</title>
</head>
<body>
<div id="app">
  <template>
    <v-app>
      <!-- 导航栏 -->
      <v-app-bar app color="primary" dark>
        <v-app-bar-nav-icon @click="toggleDrawer"></v-app-bar-nav-icon>
        <v-toolbar-title>商家管理系统</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon>mdi-bell</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon>mdi-account</v-icon>
        </v-btn>
      </v-app-bar>

      <!-- 侧边栏 -->
      <v-navigation-drawer v-model="sideDrawer" app>
        <v-sheet color="grey lighten-4" class="pa-4">
          <v-avatar class="mb-4" color="grey darken-1" size="64">
            <img src="../images/cutecat.jpg" alt="icon">
          </v-avatar>
          <div>lapu2023@outlook.com</div>
        </v-sheet>
        <v-divider></v-divider>
        <v-list>
          <v-list-item
                  v-for="item in sideDrawerlinks"
                  :key="item.icon"
                  link
                  :href="item.url"
          >
            <a :href="item.url" style="text-decoration: none; color: inherit; width: 100%; display: flex;">
              <v-list-item-icon>
                <v-icon>{{ item.icon }}</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ item.text }}</v-list-item-title>
              </v-list-item-content>
            </a>
          </v-list-item>
          <v-list-item link>
            <v-list-item-icon>
              <v-icon>mdi-cog</v-icon>
            </v-list-item-icon>
            <v-list-item-content @click="settingDialog = true">
              <v-list-item-title >设置</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>

      <!-- 主体内容 -->
      <v-main>
        <template>
          <v-container fluid>
            <v-data-iterator
                    :items="Categories"
                    :items-per-page.sync="itemsPerPage"
                    :page.sync="page"
                    :search="search"
                    :sort-by="sortBy.toLowerCase()"
                    :sort-desc="sortDesc"
                    hide-default-footer
            >
              <template v-slot:header>
                <v-toolbar
                        dark
                        color="blue darken-3"
                        class="mb-1"
                >
                  <v-text-field
                          v-model="search"
                          clearable
                          flat
                          solo-inverted
                          hide-details
                          prepend-inner-icon="mdi-magnify"
                          label="Search"
                  ></v-text-field>
                  <template v-if="$vuetify.breakpoint.mdAndUp">
                    <v-spacer></v-spacer>
                    <v-select
                            v-model="sortBy"
                            flat
                            solo-inverted
                            hide-details
                            :items="keys"
                            prepend-inner-icon="mdi-sort-alphabetical-ascending"
                            label="Sort by"
                    ></v-select>
                    <v-spacer></v-spacer>
                    <v-btn
                        color="primary"
                        depressed
                        @click="editItem(item)"
                    >
                    新增大类
                    </v-btn>
                    <v-btn-toggle
                            v-model="sortDesc"
                            mandatory
                    >
                      <v-btn
                              large
                              depressed
                              color="blue"
                              :value="false"
                      >
                        <v-icon>mdi-arrow-up</v-icon>
                      </v-btn>
                      <v-btn
                              large
                              depressed
                              color="blue"
                              :value="true"
                      >
                        <v-icon>mdi-arrow-down</v-icon>
                      </v-btn>
                    </v-btn-toggle>
                  </template>
                </v-toolbar>
              </template>

              <template v-slot:default="props">
                <v-row>
                  <v-col
                          v-for="item in props.items"
                          :key="item.name"
                          cols="12"
                          sm="6"
                          md="4"
                          lg="3"
                  >
                    <v-card>
                      <v-card-title class="subheading font-weight-bold">
                        {{ item.name }}
                      </v-card-title>

                      <v-divider></v-divider>

                      <v-list dense>
                        <v-list-item
                                v-for="(key, index) in filteredKeys"
                                :key="index"
                        >
                          <v-list-item-content :class="{ 'blue--text': sortBy === key }">
                            {{ key }}:
                          </v-list-item-content>
                          <v-list-item-content
                                  class="align-end"
                                  :class="{ 'blue--text': sortBy === key }"
                          >
                            <template v-if="key === 'descn'">
                              <div v-html="item[key]"></div>
                            </template>
                            <template v-else>
                              {{ item[key] }}
                            </template>
                          </v-list-item-content>
                        </v-list-item>

                        <v-list-item>
                          <v-list-item-content>编辑:</v-list-item-content>
                          <v-list-item-content class="align-end">
                            <v-btn color="primary"
                                   elevation="2"
                                   tile
                                   @click="editItem(item)"
                            >Edit</v-btn>
                          </v-list-item-content>
                        </v-list-item>
                        <v-list-item>
                          <v-list-item-content>删除:</v-list-item-content>
                          <v-list-item-content class="align-end">
                            <v-btn color="error"
                                   elevation="2"
                                   tile
                                   @click="deleteItem(item)"
                            >Delete</v-btn>
                          </v-list-item-content>
                        </v-list-item>
                        <v-list-item>
                          <v-list-item-content>Products:</v-list-item-content>
                          <v-list-item-content class="align-end">
                            <v-btn color="primary"
                                   elevation="2"
                                   tile
                            >Products</v-btn>
                          </v-list-item-content>
                        </v-list-item>
                      </v-list>
                    </v-card>
                  </v-col>
                </v-row>
              </template>
              <!-- 页脚 -->
              <template v-slot:footer >
                <v-row
                        class="mt-2"
                        align="center"
                        justify="center"
                        style="margin-bottom: 50px;"
                >
                  <span class="grey--text">Items per page</span>
                  <v-menu offset-y>
                    <template v-slot:activator="{ on, attrs }">
                      <v-btn
                              dark
                              text
                              color="primary"
                              class="ml-2"
                              v-bind="attrs"
                              v-on="on"
                      >
                        {{ itemsPerPage }}
                        <v-icon>mdi-chevron-down</v-icon>
                      </v-btn>
                    </template>
                    <v-list>
                      <v-list-item
                              v-for="(number, index) in itemsPerPageArray"
                              :key="index"
                              @click="updateItemsPerPage(number)"
                      >
                        <v-list-item-title>{{ number }}</v-list-item-title>
                      </v-list-item>
                    </v-list>
                  </v-menu>

                  <v-spacer></v-spacer>

                  <span
                          class="mr-4
                          grey--text"
                  >
                          Page {{ page }} of {{ numberOfPages }}
                        </span>
                  <v-btn
                          fab
                          dark
                          color="blue darken-3"
                          class="mr-1"
                          @click="formerPage"
                  >
                    <v-icon>mdi-chevron-left</v-icon>
                  </v-btn>
                  <v-btn
                          fab
                          dark
                          color="blue darken-3"
                          class="ml-1"
                          @click="nextPage"
                  >
                    <v-icon>mdi-chevron-right</v-icon>
                  </v-btn>
                </v-row>
              </template>
            </v-data-iterator>
          </v-container>
        </template>
        <!--对话框-->
        <!--删除对话框-->
        <v-dialog v-model="dialogDelete" max-width="500px">
          <v-card>
            <v-card-title class="text-h5">Are you sure you want to delete this item?</v-card-title>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="closeDelete">Cancel</v-btn>
              <v-btn color="red darken-1" text @click="deleteItemConfirm">OK</v-btn>
              <v-spacer></v-spacer>
            </v-card-actions>
          </v-card>
        </v-dialog>
        <!--编辑对话框-->
        <v-dialog
                v-model="dialog"
                max-width="500px"
        >
          <!--        <template v-slot:activator="{ on, attrs }">-->
          <!--          <v-btn-->
          <!--                  color="primary"-->
          <!--                  dark-->
          <!--                  class="mb-2"-->
          <!--                  v-bind="attrs"-->
          <!--                  v-on="on"-->
          <!--          >-->
          <!--            新建账户-->
          <!--          </v-btn>-->
          <!--        </template>-->
          <v-card>
            <v-card-title>
              <span class="text-h5">{{ formTitle }}</span>
            </v-card-title>
            <!-- 编辑卡片 -->
            <v-card-text>
              <v-container>
                <v-row>
                  <v-col
                          cols="12"
                          sm="6"
                          md="4"
                  >
                    <v-text-field
                            v-model="editedItem.catid"
                            label="Catid"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="4"
                  >
                    <v-text-field
                            v-model="editedItem.name"
                            label="Name"
                    ></v-text-field>
                  </v-col>
                  <v-col
                          cols="12"
                          sm="6"
                          md="4"
                  >
                    <v-text-field
                            v-model="editedItem.descn"
                            label="Description"
                    ></v-text-field>
                  </v-col>

                </v-row>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn
                      color="blue darken-1"
                      text
                      @click="close"
              >
                Cancel
              </v-btn>
              <v-btn
                      color="blue darken-1"
                      text
                      @click="save"
              >
                Save
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-main>


      <!-- 设置栏目 -->
      <v-row justify="center">
        <v-dialog
                v-model="settingDialog"
                fullscreen
                hide-overlay
                transition="dialog-bottom-transition"
        >
          <v-card>
            <v-toolbar
                    dark
                    color="primary"
            >
              <v-btn
                      icon
                      dark
                      @click="settingDialog = false"
              >
                <v-icon>mdi-close</v-icon>
              </v-btn>
              <v-toolbar-title>Settings</v-toolbar-title>
              <v-spacer></v-spacer>
              <v-toolbar-items>
                <v-btn
                        dark
                        text
                        @click="settingDialog = false"
                >
                  Save
                </v-btn>
              </v-toolbar-items>
            </v-toolbar>
            <v-list
                    three-line
                    subheader
            >
              <v-subheader>User Controls</v-subheader>
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>Content filtering</v-list-item-title>
                  <v-list-item-subtitle>Set the content filtering level to restrict apps that can be downloaded</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>Password</v-list-item-title>
                  <v-list-item-subtitle>Require password for purchase or use password to restrict purchase</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-list>
            <v-divider></v-divider>
            <v-list
                    three-line
                    subheader
            >
              <v-subheader>General</v-subheader>
              <v-list-item>
                <v-list-item-action>
                  <v-checkbox v-model="notifications"></v-checkbox>
                </v-list-item-action>
                <v-list-item-content>
                  <v-list-item-title>Notifications</v-list-item-title>
                  <v-list-item-subtitle>Notify me about updates to apps or games that I downloaded</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-action>
                  <v-checkbox v-model="sound"></v-checkbox>
                </v-list-item-action>
                <v-list-item-content>
                  <v-list-item-title>Sound</v-list-item-title>
                  <v-list-item-subtitle>Auto-update apps at any time. Data charges may apply</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-action>
                  <v-checkbox v-model="widgets"></v-checkbox>
                </v-list-item-action>
                <v-list-item-content>
                  <v-list-item-title>Auto-add widgets</v-list-item-title>
                  <v-list-item-subtitle>Automatically add home screen widgets</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </v-list>
          </v-card>
        </v-dialog>
      </v-row>
      <!-- 页脚 -->
      <v-footer padless>
        <v-col class="text-center" cols="12">
          {{ new Date().getFullYear() }} — <strong>MyPetstoreForMerchant</strong>
        </v-col>
      </v-footer>
    </v-app>
  </template>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/categoryMangement.js"></script>
</body>
</html>